function pro_users_top3() {
    showTableAndEcharts();
    $.ajax({
        method: "POST",
        url: "proUsersTop3",
        success: function (data) {

            var jsonArr = JSON.parse(data);


            pro_users_top3_table(jsonArr);
            pro_users_top3_echart(jsonArr);

        }
    })
}

function pro_users_top3_table(jsonArr) {
    $("#tip").html("<h3>用户人数前三的区域表格</h3>");
    $("#echart-tip").html("<h3>用户人数前三的区域图表</h3>");

    //重置表头
    $("#head-tr").empty();
    //重新添加表头
    $("#head-tr").append("<th>ID</th><th>省份</th><th>用户人数</th>");

    //重置表的数据
    $("tbody").empty();

    $.each(jsonArr, function (index, proUsersTop3) {
        if (index % 2 == 0) {
            $("tbody").append("<tr class='active'><td>"+proUsersTop3.id+"</td><td>"+proUsersTop3.province+"</td><td>"+proUsersTop3.count+"</td></tr>")
        } else {
            $("tbody").append("<tr class='info'><td>"+proUsersTop3.id+"</td><td>"+proUsersTop3.province+"</td><td>"+proUsersTop3.count+"</td></tr>")
        }
    });

    $("tbody tr").on("mouseenter", this, function() {
        color = $(this).attr("class");
        $(this).removeClass(color);
        $(this).addClass("success");
    });
    $("tbody tr").on("mouseleave", this, function() {
        $(this).removeClass("success");
        $(this).addClass(color);
    });
}


function pro_users_top3_echart(jsonArr) {
    //添加图表对应的容器
    $("#dataEcharts div:gt(0)").remove();
    $("#dataEcharts").append('<div id="pro_users_top3_1" class="col-sm-6"></div>');
    $("#dataEcharts").append('<div id="pro_users_top3_2" class="col-sm-6"></div>');
    var all_data = [];
    var x_data = [];
    var y_data = [];
    $.each(jsonArr, function (index, proUsersTop3) {
        all_data.push(
            {
                value: proUsersTop3.count,
                name: proUsersTop3.province
            }
        );
        x_data.push(proUsersTop3.province);
        y_data.push(proUsersTop3.count);
    });

    var eraTotal = echarts.init(document.getElementById("pro_users_top3_1"));
    var option = {
        title: {
            text: '用户人数前三区域占比',
            left: 'center',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            top: '8%',
            left: 'center'
        },
        series: [{
            name: '用户人数前三区域占比',
            type: 'pie',
            radius: ['40%', '80%'],
            center: ['50%', '56%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: all_data
        }]
    };
    eraTotal.setOption(option);
    eraTotal.resize({
        width: 600,
        height: 400
    });

    var eraTotal2 = echarts.init(document.getElementById("pro_users_top3_2"));
    option2 = {
        xAxis: {
            type: 'category',
            data: x_data
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {
            trigger: 'item',
        },
        series: [
            {
                data: y_data,
                type: 'bar'
            }
        ]
    };
    eraTotal2.setOption(option2);
    eraTotal2.resize({
        width: 600,
        height: 400
    });
}